<template>
  <div class="demo-spin-article" style="height: 100vh;">
    <Spin fix :show="show_spin" size="large"> </Spin>
    <div
      :style="' background-image: url(' + bg_img + '); min-height: 600px;'"
      style="background-repeat: no-repeat; background-size: cover;"
    >
      <!-- 头像 -->
      <div style="text-align: center; padding-top: 30px">
        <Avatar icon="ios-person" :src="head_photo" size="170" />
      </div>
      <!-- 名称+介绍 -->
      <div style="text-align: center">
        <Card
          :bordered="false"
          style="
            background: grba(255, 255, 255, 0.8) !important;
            margin: 20px 60px;
          "
        >
          <template #title>MaofU</template>
          <p>
            {{ home_infodata.self_explain }}
          </p>
        </Card>
      </div>
      <!-- 侧边按钮 -->
      <div style="position: fixed; left: 10px">
        <ButtonGroup vertical>
          <Button
            icon="logo-github"
            to="https://github.com/Tmaof"
            target="_blank"
          ></Button>
          <Button
            icon="ios-umbrella"
            to="https://gitee.com/tmaofu"
            target="_blank"
          ></Button>
          <Button
            icon="ios-home"
            to="https://blog.csdn.net/qq_62595450"
            target="_blank"
          ></Button>
          <Button
            icon="ios-videocam"
            to="https://space.bilibili.com/500047662"
            target="_blank"
          ></Button>
        </ButtonGroup>
      </div>

      <!-- 喜欢的句子 -->
      <div style="margin: 30px 60px">
        <DescriptionList layout="vertical">
          <Description
            v-for="(item, i) in home_infodata.posted"
            :key="i"
            term=""
          >
            {{ item }}
          </Description>
        </DescriptionList>
      </div>
    </div>
    <!-- 脚 -->
    <!-- <Footer class="layout-footer-center">2022&copy; MaofU</Footer> -->
    <GlobalFooter style="margin: 20px">
      <template #links>
        <div>
          <div class="inline_block">
            <h4>联系我</h4>
            <Image
              v-for="(item, i) in home_infodata.contact_me"
              :key="i"
              :src="item"
              preview
              :preview-list="home_infodata.contact_me"
              :initial-index="i"
              fit="fill"
              width="100px"
              height="100px"
              style="margin: 0 20px"
            />
          </div>
          <div class="inline_block">
            <h4>打赏~</h4>
            <Image
              v-for="(item, i) in home_infodata.reward"
              :key="i"
              :src="item"
              preview
              :preview-list="home_infodata.reward"
              :initial-index="i"
              fit="fill"
              width="100px"
              height="100px"
              style="margin: 0 20px"
            />
          </div>
        </div>
      </template>
      <template #copyright>
        <p @click="login">2022 © MaofU</p>
        <p @click="logout">黔ICP备2022006837号</p>
        <p>
          网站建于 {{ home_infodata.set_website_time.year }}年{{
            home_infodata.set_website_time.month
          }}月{{ home_infodata.set_website_time.day }}日 已经陪伴MaofU {{
            relative_time
          }} 天啦
        </p>
      </template>
    </GlobalFooter>
  </div>
</template>

<script>
import {
  aliyun_oss_path,
  PATH_homepage_headphoto,
  PATH_homepage_bgimg,
  PATH_homepage_info
} from '@/mylibs/define'
import get_oss_data from '@/api/aliyun_oss'
import { signout } from '@/api/API_sign_in_out'
export default {
  name: 'Homepage',
  data() {
    return {
      new_time: new Date().getTime(),
      show_spin: false,
      login_click_num: 0,
      head_photo: null,
      bg_img: null,

      home_infodata: {
        set_website_time:{year:0,month:0,day:0,time_ms:0},
        self_explain: '',
        posted: [],
        contact_me: [],
        reward: []
      }
    }
  },
  computed: {
    relative_time() {
      return Math.round(
        (this.new_time - this.home_infodata.set_website_time.time_ms) /
          (86400 * 1000)
      )
    }
  },

  methods: {
    // 获取信息
    async get_infodata() {
      var { res, ok, err } = await get_oss_data(
        aliyun_oss_path + PATH_homepage_info
      )
      if (ok) {
        if (res) this.home_infodata = res
      } else {
        this.$Notice.error({ desc: '获取主页信息失败:' + err })
      }
    },

    login() {
      this.login_click_num++
      if (this.login_click_num >= 3) {
        this.$router.push('/lg')
      }
    },

    logout() {
      this.login_click_num++
      if (this.login_click_num >= 3) {
        this.login_click_num = 0
        signout((res) => {
          this.$Notice.success({ desc: '退出登陆成功' })
        })
      }
    },

    get_headphoto() {
      get_oss_data(aliyun_oss_path + PATH_homepage_headphoto).then(
        ({ res, ok, err }) => {
          if (ok) {
            if (res.img) {
              this.head_photo = res.img
            }
          }
        }
      )
    },

    get_bgimg() {
      this.show_spin = true
      get_oss_data(aliyun_oss_path + PATH_homepage_bgimg).then(
        ({ res, ok, err }) => {
          this.show_spin = false
          if (ok) {
            if (res.img) this.bg_img = res.img
          }
        }
      )
    }
  },

  created() {
    this.get_infodata()
    this.get_bgimg()
    this.get_headphoto()
  },

  activated() {
    console.log('Homepage组件激活')
  }
}
</script>

<style>
.layout-footer-center {
  text-align: center;
}
.ivu-description-list-vertical .ivu-description-detail {
  color: white;
}
.ivu-description-list-vertical .ivu-description-term {
  color: white;
}

.ivu-card {
  background: rgba(255, 255, 255, 0.8) !important;
}
.inline_block {
  display: inline-block;
  padding: 0 20px;
}
</style>
